import React, { useEffect, useRef, useState } from "react";
import { StyleSheet } from "react-native";
import { commonStyles } from "../../configs/commonStyle";
import { Text, TouchableOpacity, View } from "react-native-ui-lib";
import { Icon } from "./index";
import moment from "moment";
import DatePickerDialog from "../common/DatePickerDialog";
import PickerDateTypeDialog from "../common/PickerDateTypeDialog";

const DateFilter = ({ onQueryClick, defaultType = 0 }) => {
  const [dateType, setDateType] = useState(defaultType);
  const [start, setStart] = useState(moment().format("YYYY-MM-DD"));
  const [end, setEnd] = useState(moment().format("YYYY-MM-DD"));
  const datePickerDialog = useRef(null);
  const pickerDialog = useRef(null);
  const pickerData = ["今天", "本周", "本月", "自定义"];

  useEffect(() => {
    switch (defaultType) {
      case 0:
        setStart(moment().format("YYYY-MM-DD"));
        setEnd(moment().format("YYYY-MM-DD"));
        break;
      case 1:
        let startOfWeek = moment().startOf("week");
        let endOfWeek = moment().endOf("week");
        setStart(moment(startOfWeek).format("YYYY-MM-DD"));
        setEnd(moment(endOfWeek).format("YYYY-MM-DD"));
        break;
      case 2:
        let startOfMonth = moment().startOf("month");
        let endOfMonth = moment().endOf("month");
        setStart(moment(startOfMonth).format("YYYY-MM-DD"));
        setEnd(moment(endOfMonth).format("YYYY-MM-DD"));
        break;
    }
  }, []);

  // logger("更新日期", start, end);
  return (
    <View style={styles.container}>
      <TouchableOpacity activeOpacity={1} style={styles.typeWrap}
                        onPress={() => pickerDialog.current.show(dateType, pickerData)}>
        <Text style={commonStyles.text_black}>{pickerData[dateType]}</Text>
        <Icon type="AntDesign" name="down" size={12} color={"#CCCCCC"} />
      </TouchableOpacity>
      <TouchableOpacity activeOpacity={1} style={styles.dateWrap}
                        onPress={() => datePickerDialog.current.show(start, end, pickerData)}>
        <Text style={{
          ...commonStyles.text_black,
          marginRight: 5,
        }}>{moment(start).format("MM.DD")} - {moment(end).format("MM.DD")}</Text>
        <Icon type="AntDesign" name="down" size={12} color={"#CCCCCC"} />
      </TouchableOpacity>
      {/*<TouchableOpacity activeOpacity={1} throttleTime={1000} style={styles.btn} onPress={()=>onQueryClick&&onQueryClick(start,end)}>*/}
      {/*  <Text style={commonStyles.text_black}>查询</Text>*/}
      {/*</TouchableOpacity>*/}
      <DatePickerDialog
        ref={datePickerDialog}
        callBack={(start, end) => {
          logger("设置日期", start, end, dateType);
          setStart(start);
          setEnd(end);
          setDateType(3);
          onQueryClick && onQueryClick(start, end);
        }}
      />
      <PickerDateTypeDialog ref={pickerDialog} onChecked={(start, end, status) => {
        setStart(start);
        setEnd(end);
        setDateType(status);
        onQueryClick && onQueryClick(start, end);
      }} />
    </View>
  );
};

export default DateFilter;

const styles = StyleSheet.create({
  typeWrap: {
    flexDirection: "row",
    alignItems: "center",
    width: 80,
    height: 40,
    justifyContent: "space-between",
    borderRadius: 4,
    borderWidth: 1,
    borderColor: "#CCCCCC",
    paddingHorizontal: 10,
    backgroundColor: "white",
  },
  dateWrap: {
    flexDirection: "row",
    alignItems: "center",
    height: 40,
    borderRadius: 4,
    borderWidth: 1,
    borderColor: "#CCCCCC",
    paddingHorizontal: 10,
    backgroundColor: "white",
    marginLeft: 10,
  },
  container: {
    marginVertical: 10,
    marginHorizontal: 15,
    flexDirection: "row",
    alignItems: "center",
  },
  tag: {
    backgroundColor: "#DBF4E2",
    marginStart: 2,
    borderRadius: 2,
    padding: 2,
  },
  edit: {
    width: 34,
    height: 18,
    marginTop: 5,
    borderRadius: 5,
    borderWidth: 0.5,
    borderColor: "#4AC86E",
    ...commonStyles.center,
  },
  item_container_checked: {
    backgroundColor: "#cccccc80",
    borderRadius: 5,
  },
  item_container: {
    backgroundColor: "white",
  },
  btn: {
    width: 80,
    height: 40,
    ...commonStyles.center,
    backgroundColor: "#F9D63B",
    borderRadius: 5,
  },
});
